import Layout from "./Layout";
import Search from "./Search";
import { Row, Col, Typography } from 'antd'
import ProductionItem from "./ProductionItem";
import { useDispatch, useSelector } from 'react-redux'
import { useEffect } from 'react'
import { get_products } from "../../store/actions/product";

const { Title } = Typography
export default function Home() {
    const { sold, createdAt } = useSelector(state => state.products)
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(get_products({ sortBy: 'sold', limit: 4, order: 'desc' }))
        dispatch(get_products({ sortBy: 'createdAt', limit: 4, order: 'desc' }))
    // eslint-disable-next-line
    }, [])
    return (
        <Layout title='舒澄首页' subTitle='如您所愿'>
            <Search />
            <Title style={{ marginTop: 20 }} level={5}>最新上架</Title>
            <Row gutter={[16, 16]}>
                    {
                        createdAt.map((product) => (
                            <Col span='6' key={product._id}>
                                <ProductionItem product={product} />
                            </Col>
                        ))
                    }
            </Row>
            <Title style={{ marginTop: 20 }} level={5}>最受欢迎</Title>
            <Row gutter={[16, 16]}>
                {
                    sold.map((product) => (
                        <Col span='6' key={product._id}>
                            <ProductionItem product={product} />
                        </Col>
                    ))
                }
            </Row>
        </Layout>
    )
}